<!--
 * @Description: 我的动态
 * @Author: liu (1427179517@qq.com)
 * @Date: 2023-05-05 16:09:28
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-12 09:33:56
 * @FilePath: \jiekuan-app\src\subPages\other\myUpdates.vue
-->
<template>
  <div class="page">
    <div class="page-header">
      <u-navbar
        title="我的动态"
        :background="nav_background"
        title-color="#fff"
        back-icon-color="#fff"
        :height="60"
        :border-bottom="false"
      >
        <span slot="right" class="invite_code" @click="handleClick({ type: 'release' })">发布 </span></u-navbar
      >
    </div>
    <div class="page-content u-p-0">
      <template v-if="listData && listData.length">
        <div
          class="item u-flex u-m-t-30"
          v-for="(item, index) in listData"
          :key="index"
          @click="handleClick({ type: 'details', item: item })"
        >
          <image :src="item.icon" class="avatar u-m-r-15" alt="" />
          <div class="item_right">
            <div class="u-flex u-col-center u-row-between flex-1">
              <div class="u-flex u-col-center">
                <span class="name">{{ item.userName }}</span>
                <image src="../../static/images/star_vip.png" v-if="item.memberLevelId" class="vip u-m-l-20" alt="" />
                <div class="tags u-flex u-col-center u-p-l-6 u-m-l-20" v-if="item.authTags && item.authTags.length">
                  <image src="../../static/images/verify.png" class="icon" alt="" />
                  <span class="u-m-l-6">真人认证</span>
                </div>
                <div class="tags u-flex u-col-center u-p-l-6 u-m-l-20" v-if="item.imgs && item.imgs.length">
                  <image src="../../static/images/play.png" class="icon" alt="" />
                  <span class="u-m-l-6">视频相册</span>
                </div>
              </div>
              <div class="time">{{item.updates}}</div>
            </div>
            <div class="age u-m-t-26" v-if="item.gender || item.age">
              {{ item.gender ? '女' : '男' }}·{{ item.age ? item.age + '岁' : '' }}
            </div>
            <div class="information u-m-t-30">{{ item.contentText }}</div>
            <div class="flex u-m-t-20">
              <image :src="item.contentUrl" class="imgs" alt="" />
            </div>
            <div class="u-flex u-col-center u-row-between u-m-t-30">
              <div class="u-flex u-col-center address">
                <image src="../../static/images/location2.png" class="location2 u-m-r-10" alt="" />
                <span>{{ item.distances }}</span>
              </div>
              <div class="u-flex u-col-center other">
                <!-- <div
                  class="u-flex u-col-center"
                  @click.stop="handleClick({ type: 'attention', item: item, index: index })"
                >
                  <image
                    :src="item.likeFlag ? '../../static/images/attention.png' : '../../static/images/no_attention.png'"
                    class="attention_icon u-m-r-12"
                    alt=""
                  />
                  <span>{{ item.likeCounts }}</span>
                </div> -->
                <div class="delete" @click.stop="handleClick({ type: 'delete', item: item })">删除</div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="no_trends">
          <image src="../../static/images/trends_starf.png" class="trends_starf" alt="" />
          <div class="u-m-t-48">快来发布第一条动态吧~</div>
          <div class="u-m-t-34 text">发布动态获得更多曝光~</div>
          <button class="btn u-m-t-34" @click="handleClick({ type: 'release' })">发布动态</button>
        </div>
      </template>
    </div>
    <div class="page-footer"></div>
  </div>
</template>

<script>
export default {
  name: 'MyUpdates', // 页面名称
  components: {}, // 挂载组件
  props: {}, // 组件传值
  data() {
    return {
      nav_background: { backgroundImage: 'transparent' },
      page: 1, // 当前页数
      per_page: 10, // 每页个数
      totalPages: 0, // 总页数（防止频繁上拉刷新）
      listData: [], // 数据列表
    }
  },
  computed: {}, // 计算机属性 类似与data概念
  watch: {}, // 监控data中数据变化
  created() {}, // 生命周期-创建完成(可以访问当前this实例)
  mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
  methods: {
    // 页面点击事件
    handleClick(options) {
      const { type, item } = options
      switch (type) {
        // case 'details':
        //   this.$jump({ name: 'personal' })
        //   break
        case 'release': // 发布动态
          this.$jump({ name: 'release' })
          break
        case 'attention':
          this.apiPostDmContentLikeContent(item, index)
          break
        case 'delete':
          this.apiDeleteDmContentDelete(item.contentId)
          break
        default:
          break
      }
    },
    // 点赞动态
    apiPostDmContentLikeContent(item, index) {
      const params = {
        type: item.likeFlag ? 0 : 1,
        likeType: 1,
      }
      this.$u.api.PostDmContentLikeContent(params).then((res) => {
        this.$set(this, this.listData[index].likeFlag)
      })
    },
    // 删除动态
    apiDeleteDmContentDelete(id) {
      this.$u.api.DeleteDmContentDelete({ id }).then((res) => {
        this.$toast('删除动态成功')
        this.page = 1
        this.apiGetDmContentMyContentList()
      })
    },
    // 获取我的动态列表
    apiGetDmContentMyContentList(isRechBottom) {
      const params = {
        pageNum: this.page,
        pageSize: this.per_page,
      }
      this.$u.api.GetDmContentMyContentList(params).then((res) => {
        const list = res.data;
        if (isRechBottom) {
          this.listData = this.listData.concat(list)
          return
        }
		console.log("1234567890");
		console.log(res);
		console.log(list);
        this.listData = list;
        // this.totalPages = Math.ceil(total / this.per_page)
      })
    },
  }, // 挂载一些方法
  onLoad(options) {
    console.log('onLoad', options, Date.now())
  }, // 生命周期回调—监听页面加载
  onShow() {
    this.apiGetDmContentMyContentList()
  }, // 生命周期回调—监听页面显示
  onReachBottom() {
    if (this.page < this.totalPages) {
      this.page += 1
      this.apiGetDmContentMyContentList(true)
    }
  },
  onReady() {}, // 生命周期回调—监听页面初次渲染完成
  onHide() {}, // 生命周期回调—监听页面隐藏
  onUnload() {}, // 生命周期回调—监听页面卸载
}
</script>

<style lang="scss" scoped>
.page {
  background-image: url('http://minio.tianhong.mobi/mall/xiaoq/home_bg.png');
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.invite_code {
  width: 120rpx;
  height: 65rpx;
  background: #fcc307;
  border-radius: 33rpx;
  font-size: 25rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  display: inline-block;
  line-height: 65rpx;
  margin-right: 20rpx;
}
.item {
  align-items: flex-start;
  padding: 0 40rpx 20rpx 34rpx;
  border-bottom: 1rpx solid rgba($color: #fff, $alpha: 0.2);
}
.avatar {
  width: 95rpx;
  height: 95rpx;
  background-color: #fff;
}
.item_right {
  width: 100%;
}
.name {
  font-size: 31rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
}
.vip {
  width: 39rpx;
  height: 35rpx;
}
.tags {
  width: 140rpx;
  height: 35rpx;
  background: linear-gradient(0deg, #e2c43e, #fea700);
  border-radius: 3rpx;
  font-size: 21rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #4137ce;
}
.icon {
  width: 24rpx;
  height: 24rpx;
}
.time {
  font-size: 21rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #dcdcdc;
}
.age {
  font-size: 21rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #dcdcdc;
}
.information {
  font-size: 31rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
}
.imgs {
  width: 200rpx;
  height: 200rpx;
}
.address {
  font-size: 21rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #dcdcdc;
}
.location2 {
  width: 23rpx;
  height: 25rpx;
}
.attention_icon {
  width: 40rpx;
  height: 35rpx;
}
.other {
  font-size: 25rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
}
.delete {
  margin-left: 120rpx;
  font-size: 25rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  text-decoration: underline;
  color: #c8c8c8;
}
.no_trends {
  margin-top: 70%;
  text-align: center;
  font-size: 31rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
  .text {
    font-size: 25rpx;
    font-family: Microsoft YaHei UI;
    font-weight: 400;
    color: #dcdcdc;
  }
  .btn {
    width: 220rpx;
    height: 65rpx;
    background: #fcc307;
    border-radius: 33rpx;
    font-size: 25rpx;
    font-family: Microsoft YaHei UI;
    font-weight: 400;
    color: #ffffff;
    line-height: 65rpx;
  }
}
.trends_starf {
  width: 150rpx;
  height: 150rpx;
}
</style>
